<template>
    <div class="goods-info">
        <!-- 商品展示图 -->

        <van-image style="display: flex;justify-content: center;height: 80px" fit="contain" :src="`${APIDomainName}${goodsDetail.img}`">
            <!--            <template v-slot:error>加载失败</template>-->
        </van-image>
        <!-- 商品名称 -->
        <van-cell title="商品名称" :label="goodsDetail.name"/>
        <!-- 商品描述 -->
        <van-cell title="商品描述" :label="goodsDetail.desc"/>

        <!-- 商品购买区域 -->
        <van-cell>
            <template #default>
                <div>
                    定价：
                    <span class="red">¥{{ goodsDetail.price }}</span>
                </div>

                <div v-if="goodsDetail.num" class="num-buy">
                    <div>购买数量</div>
                    <van-stepper
                        v-model="count"
                        integer
                        :max="goodsDetail.num"
                    />

                    <van-button
                        type="primary"
                        size="small"
                        @click="onClickAddShopcart"
                    >加入购物车
                    </van-button>
                </div>
                <div v-else class="red">该商品暂时无货</div>
            </template>
        </van-cell>

        <!-- 商品参数区域 -->
        <!--        <van-cell title="商品卖点" :label="goodsDetail.sell_point"/>-->
        <van-cell title="库存情况" :label="goodsDetail.num"/>
        <van-cell title="上架时间" :label="goodsDetail.create_time"/>
        <!--        <van-cell title="商品详情">-->
        <!--            <template #label>-->
        <!--                <div class="good-desc" v-html="goodsDetail.content"></div>-->
        <!--            </template>-->
        <!--        </van-cell>-->
        <van-cell title="商品评价"></van-cell>
        <div v-if="evaluateList.length>0">
            <van-cell v-for="item in evaluateList" :key="item.id">
                <!--            <template></template>-->
                {{ item.evaluate }}
            </van-cell>
        </div>
        <div v-else>
            <van-empty description="暂无数据"></van-empty>
        </div>

    </div>
</template>

<script>
import {Swipe, SwipeItem, Button, Stepper, Cell} from "vant";
import {getGoodsDetailById} from "@/api/goods.js";
import {addCart} from "@/api/cart.js";
import {evaluateList} from "../../api/goods";

export default {
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Button.name]: Button,
        [Stepper.name]: Stepper,
        [Cell.name]: Cell,
    },
    data() {
        return {
            goodsDetail: {}, // 获取到的商品信息
            count: 1, // 购买的商品数量，默认是1
            ballFlag: false, // 控制小球的显示和隐藏
            evaluateList: []
        };
    },
    props: ["id"], //商品编号
    created() {
        this.getGoodsDetail();
        this.getEvaluate()
    },
    methods: {
        async getGoodsDetail() {
            try {
                let result = await getGoodsDetailById({id: this.id});
                if (result.code == 1) {
                    this.goodsDetail = result.data;
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
                this.$router.go(-1);
            }
        }, //===================================================

        async onClickAddShopcart() {
            let params = {
                goods_id: this.goodsDetail.id,
                price: this.goodsDetail.price,
                count: this.count,
            };

            try {
                let result = await addCart(params);
                if (result.code == 1) {
                    this.$toast(result.msg);
                    this.$router.back()
                } else if (result.code == 2) {
                    this.$router.push({name: "login"});
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
            }
        }, //=============================================
        async getEvaluate() {
            let result=await evaluateList({goodsId:this.id})
            console.log("e",result)
            this.evaluateList=this.utils.resultList(result)
        }
    },
};
</script>

<style lang="less" scoped>
.goods-info {
    padding: 10px;

    .red {
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

    .num-buy {
        display: flex;
        flex-direction: row;
        margin: 10px 0px;
        justify-content: space-between;
    }

    .good-desc {
        padding: 5px;
    }
}
</style>
